<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>uppit组件整理</title>
<link href="css/style.css" rel="stylesheet">
<link href="fonts/iconfont.css" rel="stylesheet">
<style>
.module-wrap{
  width: 1400px;
  margin: 0 auto;
}
.module-top{
  height: 200px;
  line-height: 200px;
  background: #3498db;
  color: #fff;
  text-align: center;
  font-size: 40px;
  margin-bottom: 10px;
}
.module{
  border: 1px solid #d3d3d3;
  margin-bottom: 10px;
  border-radius: 3px 3px 0 0;
}
.module-hd{
  height: 36px;
  line-height: 36px;
  padding-left: 10px;
  border-bottom: 1px solid #d3d3d3;

}
.module-bd{
  padding: 10px;
}
html,body{
  height: auto;
  background: #fff;
  overflow: auto;
  padding-top: 0;
}

.box{
  min-height: 30px;
  line-height: 30px;
  text-align: center;
  background: #f8f8f8;
  font-size: 12px;
  margin: 10px 0;
}
.row:last-child{
  margin-bottom: 0;
}
.row-no-gap div:nth-child(even) .box{
  background: #e5e5e5;
}
</style>
</head>
<body>
<div class="module-wrap">
  <div class="module-top">网页组件规范</div>
  <div class="module">
    <div class="module-hd">线-向上</div>
    <div class="module-bd">
      <div style="position: relative; height: 100px;">
        <div class="line-to-top is-arrow"><span class="star" style="transform: translateY(-80px);"></span></div>
      </div>
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd">线-向下</div>
    <div class="module-bd">
      <div style="position: relative; height: 100px;">
        <div class="line-to-bottom is-arrow"><span class="star" style="transform: translateY(80px);"></span></div>
      </div>
    </div>
  </div>
  <div class="module">
    <div class="module-hd">线-向左</div>
    <div class="module-bd">
      <div style="position: relative; height: 10px; width: 100px;">
        <div class="line-to-left is-arrow"><span class="star" style="transform: translateX(-80px);"></span></div>
      </div>
    </div>
  </div>
  <div class="module">
    <div class="module-hd">线-向右</div>
    <div class="module-bd">
      <div style="position: relative; height: 10px; width: 100px;">
        <div class="line-to-right is-arrow"><span class="star" style="transform: translateX(80px);"></span></div>
      </div>
    </div>
  </div>
  <div class="module">
    <div class="module-hd">线-一组</div>
    <div class="module-bd">
      <div class="line-vertical-group">
        <div class="line-to-top is-arrow"></div>
        <div class="line-to-bottom is-arrow"></div>
      </div>
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
  <div class="module">
    <div class="module-hd"></div>
    <div class="module-bd">
      
    </div>
  </div>
</div>
<!-- 遮罩 -->
<div class="mask"></div>
<script src="js/jquery.min.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/common.js"></script>

<!-- checkbox美化 -->
<script src="js/icheck.min.js"></script>
<script>
$(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox',
    radioClass: 'iradio'
  });
})
</script>
<!-- 弹窗 -->
<script>
$("#btn-modal").on("click",function(){
  modalShow()
})
</script>
<!-- nicescroll滚动条插件 -->
<script src="js/nicescroll.min.js"></script>
<script>
$("#box-scroll").niceScroll({
  cursorcolor: "#f5f5f5",//滚动条的颜色
  cursoropacitymax: 1, //滚动条的透明度，从0-1
  cursorwidth: "5px", //滚动条的宽度
  cursorborder: "0", // 游标边框css定义
  cursorborderradius: "5px",//以像素为光标边界半径  圆角
  autohidemode: true, //是否隐藏滚动条  true的时候默认不显示滚动条，当鼠标经过的时候显示滚动条
});
</script>
</body>
</html>